<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div id=?header? align="left">
    <h1> DIET PLANNING </h1>
</div>
<link href="css/homeHeader.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/startstop-slider.js"></script>
 <div  align="center">
     <img src="images/Banner.jpg" width="1024" height="200" />
    </div>
<!-- header: LOgin form, HIDDEN -->
<div id="header" class="clientLogin">
    <div class="inside">

        <div id="loginForm" class="clientLoginBlock">
            <form class="clientLoginForm" action="ControllerServlet" method="post">
                <table>
                    <tr>
                        <th>Tài Khoản:</th>
                        <td><input type="text" placeholder="Username" name="txtUserName"  id="usernameBox" class="loginBoxInput" required/></td>
                        <th>Mật Khẩu:</th>
                        <td><input type="password" placeholder="Password" name="txtPassword" id="passwordBox" class="loginBoxInput" required/></td>
                    
                        <td id="loginButton"><input type="submit" value="Login" name="btnAction" id="loginButton"/></td>
                    </tr>
                </table>
            </form>
        </div>  <!-- end of loginForm -->
    </div> <!-- end of inside -->
</div> <!-- end of header -->

<!-- Top Content: button show login form, Logo, some content -->
<div id="top_content">

    <div class="inside">
        <!-- click to show Login Form -->
        <%--             <c:out value="${sesionScope.username }"></c:out> --%>
        <div id="showLoginForm">
            <c:if test="${not empty sessionScope.FULLNAME}">
                <span class="welcome-span">Welcome
                    <c:out value="${sessionScope.FULLNAME}"></c:out>
                </span>
                <a class="logout" href="ControllerServlet?btnAction=Logout">[Log out]</a>
            </c:if>
            <c:if test="${empty sessionScope.FULLNAME}">
                <span class="welcome-span">Welcome Guest</span>
                <img id="button-show-login-form-img" src="images/DangNhap.jpg">
                <a href="/DietPlanning/index.jsp"><img src="images/DangKy1.jpg" alt="alt text" style="border:none;"/></a>
            </c:if>
                <div id="msgLogin" style="color: red;">${requestScope.INVALID}</div>
                </br>
        </div> <!-- end of showLoginForm -->
        </div>
        </div> 
        </br>
        <c:if test="${empty sessionScope.FULLNAME}">
            <div id=?menu? align="center">
    <a class="btn btn-large btn-primary " href="home.jsp">Trang Chủ</a> 
    <a class="btn btn-large btn-primary " href="dish.jsp">Thư Viện Thức Ăn</a> 
    <a class="btn btn-large btn-primary " href="food.jsp">Thư Viện Thực Phẩm</a>
    </div>
    </c:if>
        <c:if test="${not empty sessionScope.FULLNAME}">
              <div id=?menu? align="center">
    <a class="btn btn-large btn-primary " href="home.jsp">Trang Chủ</a> 
    <a class="btn btn-large btn-primary " href="ControllerServlet?btnAction=mydiet">Thực Đơn</a> 
    <a class="btn btn-large btn-primary " href="cooking.jsp">Vào Bếp</a> 
    <a class="btn btn-large btn-primary " href="dish.jsp">Thư Viện Thức Ăn</a> 
    <a class="btn btn-large btn-primary " href="food.jsp">Thư Viện Thực Phẩm</a> 
    <a class="btn btn-large btn-primary " href="setting.jsp">Thông Tin Tài Khoản</a> 
    </div>
        </c:if>
        </br>
    
